<script setup lang="ts">
import ViewContainer from "@/layouts/ViewContainer.vue";
import titleConfig from "./carList.title";
import useScan from "@/hooks/useScan";
import { useMessage } from "wot-design-uni";
import { storageService } from "@/service/storage";
import Spin from "@/components/Spin/index.vue";
import blank from "@/static/images/blank.png";
import Form from "@/components/StorageForm/index";
import { useToastStore } from "@/store";

const Basic = Form.BasicForm;

const loading = ref(false);

const currentType = ref();

const list = ref([]);

const message = useMessage();

const listenScanRes = async (res) => {
	loading.value = true;
	try {
		const rs = await storageService.scanBoxIn({ boxNumber: res });
		if (!rs || !rs.mainOrderNumber) {
			throw rs;
		}
		const carRs = await storageService.getCarList({
			mainOrderNumber: rs.mainOrderNumber,
		});
		if (carRs && carRs.length > 0) {
			list.value = carRs;
		} else {
			toastStore.set("暂无数据", "warning");
		}
	} catch (error) {
		console.log(error);
	} finally {
		loading.value = false;
	}
};

const toastStore = useToastStore();

useScan({
	scanCallback: listenScanRes,
	timeOutCallback: () => {
		toastStore.set("未识别，请核对条形码是否正确", "warning");
		// message.alert("未识别，请核对条形码是否正确");
	},
});

// 选择
const handleChoose = (e) => {
	// 出货扫描
	if (currentType.value === "shipment") {
		uni.redirectTo({
			url: `/pages/shipment/index?id=${e.id}`,
		});
		return;
	}
	if (e.transportStatus === "RECEIVED") {
		// message.alert("该车单已收货，不可重复入库");
		toastStore.set("该车单已收货，不可重复入库", "error");
		return;
	}
	uni.navigateTo({
		url: `/pages/inbound/index?id=${e.id}`,
	});
};

onLoad(({ type }) => {
	/* #ifdef H5 */
	listenScanRes(1);

	/* #endif */

	currentType.value = type;
});
</script>

<template>
	<ViewContainer :title="titleConfig" innerClass="car-list-page">
		<Spin :loading="loading" full>
			<template v-if="list.length">
				<view v-for="item in list" :key="item.id" @click="() => handleChoose(item)">
					<Basic type="show" :showTitle="false" :data="item" :simple="true" />
					<view class="divider"></view>
				</view>
			</template>
			<template v-else>
				<view class="blank">
					<wd-img :src="blank" class="blank-img" />
					<view class="text">
						<view>扫描箱号获取车单数据</view>
					</view>
				</view>
			</template>
		</Spin>
	</ViewContainer>
</template>

<style lang="less" scoped>
.blank {
	width: 80%;
	height: 580px;
	margin: 10px auto;
	padding-bottom: 50px;
	margin-top: 300px;

	.blank-img {
		width: 100%;
		height: 100%;
	}

	.text {
		text-align: center;
		font-size: 35px;
		color: rgba(0, 0, 0, 0.45);
	}
}

.divider {
	width: 100%;
	height: 40px;
}
</style>
